<template>
  <el-dialog :title="title" :visible.sync="addVisible" width="70%" top="5vh">
    <div>
      <el-form ref="form" :model="form" size="small">
        <el-row>
          <el-col :span="12">
            <el-form-item label="名称" label-width="80px" prop="name">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="年份" label-width="80px" prop="year">
              <el-input v-model="form.year"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="酒庄" label-width="80px" prop="maker">
              <el-input v-model="form.maker"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="产地" label-width="80px" prop="procuctionLocation">
              <el-input v-model="form.procuctionLocation"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="生产日期" label-width="80px" prop="makeTime">
              <el-date-picker
                v-model="form.makeTime"
                type="date"
                format="yyyy-MM-dd"
                value-format="yyyy-MM-dd"
                placeholder="选择日期">
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="酒精浓度" label-width="80px" prop="alcholoPercentage">
              <el-input v-model="form.alcholoPercentage"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <span class="form-unit">%</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="图片" label-width="80px" prop="img">
              <input type="hidden" v-model="form.img"/>
              <input id="file" type="file" ref="file" v-on:change="upLoad" style="display: none;"></input>
              <el-button class="el-button--primary" v-on:click="clickUpLoad">上传</el-button>
              <div v-show="imgShow" style="margin-top:10px;">
                <img :src="form.img" width="40px" height="160"/>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="23">
            <el-form-item label="品酒笔记" label-width="80px" prop="pinjiu_note">
              <el-input v-model="form.pinjiu_note" type="textarea" :autosize="{ minRows: 4, maxRows: 6}"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="进价" label-width="80px" prop="purchasingPrice">
              <el-input v-model="form.purchasingPrice"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <span class="form-unit">元</span>
          </el-col>
          <el-col :span="11">
            <el-form-item label="代理商价" label-width="80px" prop="delegatePrice">
              <el-input v-model="form.delegatePrice"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <span class="form-unit">元</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="11">
            <el-form-item label="经销商价" label-width="80px" prop="agencyPrice">
              <el-input v-model="form.agencyPrice"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <span class="form-unit">元</span>
          </el-col>
          <el-col :span="11">
            <el-form-item label="团购价" label-width="80px" prop="groupPrice">
              <el-input v-model="form.groupPrice"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <span class="form-unit">元</span>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12" label-width="80px">
            <el-form-item label="是否发布" label-width="80px">
              <el-switch
                active-color="#13ce66"
                inactive-color="#ccc"
                v-model="form.publish"
                active-value=1
                inactive-value=0>
              </el-switch>
              <span class="form-unit" v-show="form.publish==1">是</span>
              <span class="form-unit" v-show="form.publish==0">否</span>
            </el-form-item>
          </el-col>
          <el-col :span="11">
            <el-form-item label="初始库存" label-width="80px" prop="number">
              <el-input v-model="form.number"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="1">
            <span class="form-unit">瓶</span>
          </el-col>
        </el-row>
        <el-form-item label="操作人" label-width="80px" style="display: none;">
          <el-input v-model="form.operatorID"></el-input>
        </el-form-item>
      </el-form>
    </div>

    <span slot="footer" class="dialog-footer">
      <el-button @click="addVisible = false" size="small">取 消</el-button>
      <el-button type="primary" v-on:click="confirmAdd" size="small">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
  import * as qiniu from 'qiniu-js'
  import {getUpLoadToken} from '@/api/common'
  import {insertProduct,productDetail} from '@/api/product'

  export default {
    data() {
      return {
        addVisible: false,
        form: {
          name: '',
          year: '',
          maker: '',
          procuctionLocation: '',
          makeTime: '',
          alcholoPercentage: '',
          img: '',
          pinjiu_note: '',
          purchasingPrice: '',
          delegatePrice: '',
          agencyPrice: '',
          groupPrice: '',
          publish: 0,
          number: '0',
          operatorID: 123 //操作人
        },
        imgShow: false,
        title:'', //标题
      }
    },
    watch: {
      form (val) {
        if(val.img!=''){
          this.imgShow = true;
        }else{
          this.imgShow = false;
        }
      }
    },
    methods: {
      /**
       * 打开 新增/编辑 弹框
       */
      openAdd(type,id) {
        this.addVisible = true;
        if(this.$refs['form']){
          this.$refs['form'].resetFields();
          this.imgShow = false;
        }
        // setTimeout(
        //   this.$refs['form'].resetFields()
        // ,0);
        if(type===1){ //新增
          this.title = '新增商品';
        }else{
          this.title = '编辑商品';
          this.echoDetailData(id);
        }
      },

      /**
       * 回显详情里的数据
       */
      echoDetailData(id){
        let param = {productId:id};
        var _this = this;
        productDetail(param).then(response => {
          if (response.code === 0) {
            console.log(response.data);
            _this.form = response.data;
          }else{
            this.$message.error('获取详情失败！');
          }
        })
      },

      /**
       * 点击上传按钮
       */
      clickUpLoad() {
        document.getElementById('file').click();
      },
      /**
       * 上传文件请求token
       */
      upLoad() {
        //请求七牛token
        getUpLoadToken().then(response => {
          if (response.code === 0) {
            this.toUpLoad(response.token);

          }
        })

      },
      /**
       * 上传文件
       * @param data
       */
      toUpLoad(data) {
        var _this = this;
        let file = this.$refs.file.files[0],
          key = file.name,
          token = data,
          putExtra = {
            mimeType: ["image/png", "image/jpeg"]
          },
          config = {};

        // console.log(file);
        var observer = {
          next(res) {
            // ...
            // console.log(res)
          },
          error(err) {
            // ...
            console.log(err);
            if(err.code===614)
            _this.$message({
              message: '文件已经存在',
              type: 'warning'
            });
          },
          complete(res) {
            // ...
            _this.imgShow = true;
            _this.form.img = 'http://redvineshare.cn/' + res.key;
          }
        }
        var observable = qiniu.upload(file, key, token, putExtra, config);
        var subscription = observable.subscribe(observer); // 上传开始
      },
      /**
       * 提交新增
       */
      confirmAdd(){
        let param = this.form;
        // console.log(param)
        insertProduct(param).then(response => {
          if (response.code === 0) {
            this.$message({
              message: '添加成功！',
              type: 'success'
            });
            this.addVisible = false;//关闭弹窗
            this.$emit('updateData');
          }else{
            this.$message.error('添加失败！');
          }
        })

      }
    },
    created() {

    }
  }
</script>
<style scoped>
  .el-date-editor.el-input{
    width:100%;
  }
</style>
